/* eslint-disable no-mixed-spaces-and-tabs */
<template>
  <div class="login">
    <img src="@assets/images/logo.png" alt="" style="width:100px,height:100px">
    <div class="div">{{data}}</div>
    <button class="btn-login" @click="login">按钮</button>
    <div class="cla" id="main"></div>
  

  </div>
</template>

<script>

import * as echarts from 'echarts';
import {reqlogin} from "../api/login"
import md5 from "js-md5"
import { onMounted } from 'vue';
export default {
  name: "Home",
  setup(){
    const echartInit=()=>{
      // 1. 实例化对象
      const myChart = echarts.init(document.getElementById('main'));
      // 2. 指定配置项和数据
       const option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
    }]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option)
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
    }
    onMounted(()=>{
      echartInit()
    })
    return {echartInit}

  },

  data() {
    return {
      lightheightcurrentlogin: true,
      lightheightcurrentregister: false,
      data:{}
    };
  },
  methods: {
  async login(){
     const data={
          account:"1905",
          password:md5("123456")
     }
     const response =await reqlogin(data)
     this.data=response
     console.log("登录成功",response);

  }
  },
};
</script>
<style lang="less" scoped>
.login{
  width: 100%;
  height: 100vh;
  background-color:#09223a ;
  .cla{
    width: 8rem;
    height: 8rem;
    background-color: pink;
  }
  .div{
    width: 100px;
    height: 100px;
  
    background-color: aqua;
  }
}
</style>